<template>
	<view>
		<!-- 商品一物一码列表弹窗 -->
		<uni-popup ref="popup" :safe-area="false" type="bottom" :mask-click="false">
			<view class="popup_list" :style="{height: btom}" v-if="goodsList">
				<view class="text_top_popup">
					<span>当前商品一物一码列表（商品数量{{goodsList?.qty}}）</span><uni-icons color="#aaa" @click="closePopup()"
						size="22" type="closeempty"></uni-icons>
				</view>
				<view class="list_ovh_box">
					<scroll-view class="scroll-view_list" scroll-y="true">
						<!-- 原商品信息 -->
						<view class="height_list">
							<view class="left_img">
								<image v-if="goodsList.goodsImage" @click="lookImg([goodsList.goodsImage])" class="img"
									lazy-load :src="goodsList.goodsImage" mode="aspectFill"></image>
								<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
							</view>
							<view class="right_text">
								<view class="brands">
									{{goodsList.goodsName}}
								</view>
								<view class="ms">
									<p class="tip">编号：</p>
									<p class="lis">{{goodsList.goodsCode}}</p>
								</view>
								<view class="ms">
									<p class="tip">型号：</p>
									<p class="lis">{{goodsList.goodsModel}}</p>
								</view>
								<view class="ms">
									<p class="tip">规格：</p>
									<p class="lis">{{goodsList.goodsSpecName}}</p>
								</view>
								<view class="ms">
									<p class="tip">分类：</p>
									<p class="lis">{{goodsList.goodsType}}</p>
								</view>
							</view>
						</view>
						<view v-if="is_EditSN"
							style="display: flex;align-items: center;font-size: 24rpx;color: #007cff;padding-bottom: 12rpx;">
							<span @click="changeGoods()"
								style="display: flex;align-items: center;font-size: 24rpx;column-gap: 12rpx;"><uni-icons
									type="shop" color="#007cff"></uni-icons> 更换商品
								<uni-icons type="right" color="#007cff"></uni-icons></span>
						</view>
						<view v-if="exchangeInfo"
							style="border-top: 1px solid #eee;padding: 12rpx 0;display: flex;justify-content: center;font-size: 24rpx;color: #777;">
							原报单商品更换为以下商品 <uni-icons type="pulldown" color="#777"></uni-icons>
						</view>
						<!-- 更换的商品信息 -->
						<view class="height_list" v-if="exchangeInfo">
							<view class="left_img">
								<image v-if="exchangeInfo.goodsImage" @click="lookImg([exchangeInfo.goodsImage])"
									class="img" lazy-load :src="exchangeInfo.goodsImage" mode="aspectFill"></image>
								<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
							</view>
							<view class="right_text">
								<view class="brands">
									{{exchangeInfo.goodsName}}
								</view>
								<view class="ms">
									<p class="tip">编号：</p>
									<p class="lis">{{exchangeInfo.goodsCode}}</p>
								</view>
								<view class="ms">
									<p class="tip">型号：</p>
									<p class="lis">{{exchangeInfo.goodsModel}}</p>
								</view>
								<view class="ms">
									<p class="tip">规格：</p>
									<p class="lis">{{exchangeInfo.goodsSpecName}}</p>
								</view>
								<view class="ms">
									<p class="tip">分类：</p>
									<p class="lis">{{exchangeInfo.goodsType}}</p>
								</view>
							</view>
						</view>
						<view class="" v-if="exchangeInfo"
							style="display: flex;align-items: center;font-size: 24rpx;color: #f56c6c;padding-bottom: 12rpx;padding-right: 10rpx;">
							<span @click="changeGoodsCancel()"
								style="display: flex;align-items: center;font-size: 24rpx;column-gap: 12rpx;"><uni-icons
									type="shop" color="#f56c6c"></uni-icons>
								取消更换</span>
						</view>

						<view class="list_ovh">
							<uni-list-item v-if="goodsList?.codes.length>0" v-for="(item,index) in goodsList?.codes"
								clickable :key="index">
								<template v-slot:body>
									<view class="">
										<view class="way_name">
											<span class="code_sn">{{index+1}}.&nbsp;&nbsp;{{item}}</span>
											<view class="copy_del">
												<image class="img" @click="copy(item)" src="/static/copy.svg"
													mode="aspectFit">
												</image>
												<span style="color: #007cff;" v-if="is_EditSN"
													@click="editCodeSN(index)">修改</span>
											</view>
										</view>
										<view class="" style="color: #f56c6c;font-size: 24rpx;"
											v-if="oldCodeList.includes(item)&&is_EditSN">
											该条码商品与更换的商品不一致，请修改！
										</view>
									</view>
								</template>
							</uni-list-item>
							<uni-list-item v-if="is_EditSN&&goodsList?.qty>goodsList?.codes.length" clickable>
								<template v-slot:body>
									<view class="way_name">
										<uni-icons type="plusempty" color="#f56c6c"></uni-icons>
										<span class="code_sn" style="color: #f56c6c;"
											@click="editCodeSN(null)">添加条码</span>
									</view>
								</template>
							</uni-list-item>
						</view>
					</scroll-view>
				</view>
				<view class="onlogout_bg" v-if="is_EditSN">
					<button class="onlogout" @click="updateWorkGoodsBindSnCodeFn"
						type="primary"><span>确认修改</span></button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupCode" type="center" :mask-click="false">
			<view class="popup_add">
				<p class="text_top_popup">修改条码<uni-icons class="icon" color="#aaa" @click="popupCode.close()" size="20"
						type="closeempty"></uni-icons></p>
				<view class="search_box" v-if="is_EditSN">
					<uni-easyinput suffixIcon="scan" @confirm="addCode()"
						@input="nextTick(()=>code=code.replace(/[\u4e00-\u9fa5]/g, ''))" class="search_input"
						placeholderStyle="font-size:28rpx;" v-model="code" placeholder="请输入条码查询修改"
						@iconClick="iconClick" maxlength="30"></uni-easyinput>
					<span class="search_btn" @click="addCode">查询</span>
				</view>
				<view class="height_list" v-if="tmpCodeInfo">
					<view class="left_img">
						<image v-if="tmpCodeInfo.goodsImage" @click="lookImg([tmpCodeInfo.goodsImage])" class="img"
							lazy-load :src="tmpCodeInfo.goodsImage" mode="aspectFill"></image>
						<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
					</view>
					<view class="right_text">
						<view class="brands">
							{{tmpCodeInfo.goodsName}}
						</view>
						<view class="ms">
							<p class="tip">编号：</p>
							<p class="lis">{{tmpCodeInfo.goodsCode}}</p>
						</view>
						<view class="ms">
							<p class="tip">型号：</p>
							<p class="lis">{{tmpCodeInfo.goodsModel}}</p>
						</view>
						<view class="ms">
							<p class="tip">规格：</p>
							<p class="lis">{{tmpCodeInfo.goodsSpecName}}</p>
						</view>
						<view class="ms">
							<p class="tip">分类：</p>
							<p class="lis">{{tmpCodeInfo.goodsType}}</p>
						</view>
						<view class="ms">
							<p class="tip">条码：</p>
							<p class="lis">{{tmpCodeInfo.code}}</p>
						</view>
					</view>
				</view>
				<view v-if="is_EditSN" class="onlogout_bg" :style="`opacity:${tmpCodeInfo?1:0} ;`">
					<button class="onlogout" @click="confirmFn()" type="primary"><span>确认修改</span></button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :showClose="false" confirmText="确认" type="info" title="提示">
				<p style="font-size: 28rpx;">该条码商品与以上条码商品不一致，请确认此条码是同一个商品型号，<span style="color: #007cff;">
						或点击更换商品后在输入此条码
					</span></p>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		watch,
		toRefs, nextTick
	} from "vue";
	import apiOrder from "@/util/network_api/apiOrder.js"
	import _ from "lodash";
	onMounted(() => {
		btom.value = uni.getWindowInfo().windowHeight - 40 + "px"
	})
	const btom = ref()
	const goodsList = ref()
	const exchangeInfo = ref(null)//更换的商品信息
	const exchange = ref(false)//是否更换的商品信息

	const exchangeIndex = ref(0)
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
		dataList: Object,
		workId: String,
		is_EditSN: Boolean
	})
	// const scrollRef=ref()
	//使用父组件传递过来的值
	const { showpopup, dataList, workId, is_EditSN } = toRefs(props)
	const popup = ref()
	const code : any = ref('')
	const popupCode = ref()
	const tmpCodeInfo = ref()
	const oldCodeList = ref([])
	// 修改SN码
	const editCodeSN = (index) => {
		exchange.value = false
		tmpCodeInfo.value = null
		code.value = ''
		exchangeIndex.value = index
		popupCode.value.open()
		// goodsList.value.codes = goodsList.value.codes.filter(o => !(o == code))
	}
	const emit = defineEmits(['set-popup', 'updata_datail'])
	const closePopup = () => {
		popup.value.close()
		emit('set-popup', false)
	}
	const openPopup = () => {
		popup.value.open()
		emit('set-popup', true)
		goodsList.value = _.cloneDeep(dataList.value)
		exchange.value = false
		tmpCodeInfo.value = null
		oldCodeList.value = []
		exchangeInfo.value = null
	}
	watch(showpopup, (n) => {
		if (n) {
			openPopup()

		} else {
			closePopup()
		}
	})
	// 更换商品
	const changeGoods = () => {
		exchange.value = true
		tmpCodeInfo.value = null
		code.value = ''
		exchangeIndex.value = 0
		goodsList.value = _.cloneDeep(dataList.value)
		popupCode.value.open()
	}
	const alertDialog = ref()
	// 取消更改
	const changeGoodsCancel = () => {
		exchange.value = false
		oldCodeList.value = []
		exchangeInfo.value = null
		goodsList.value = _.cloneDeep(dataList.value)
	}
	// 确认修改SN码
	const updateWorkGoodsBindSnCodeFn = _.debounce(() => {
		if (goodsList.value.qty > goodsList.value.codes.length) {
			uni.showModal({
				title: '提示',
				content: '条码数量要与商品数量一致,请先添加条码',
				confirmText: '确认',
				showCancel: false
			}).then(res => {
				//确认
				if (res.confirm) {
					return
				}
			})
			return
		}
		if (oldCodeList.value.length > 0) {
			alertDialog.value.open()
			// uni.showModal({
			// 	title: '提示',
			// 	content: '该条码商品与以上条码商品不一致，请确认此条码是同一个商品型号，或点击更换商品后在输入此条码',
			// 	confirmText: '确认',
			// 	showCancel: false
			// }).then(res => {
			// 	//确认
			// 	if (res.confirm) {

			// 		return
			// 	}
			// })
			return
		}

		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		let dataVo = {
			"snCodes": goodsList.value.codes,
			"workGoodsId": goodsList.value.id
		}
		apiOrder.updateWorkGoodsBindSnCode(dataVo, workId.value).then(async res => {
			uni.hideLoading()
			if (res.code == 20000) {
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				})
				closePopup()
				emit('updata_datail')
			}
		})

	}, 500, { leading: false })

	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				if (res.result) {
					code.value = res.result
					addCode()
				}
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '商品不支持此功能',
					duration: 3000
				})
				// #endif
			}
		})
	}
	const addCode = _.debounce(async () => {
		code.value = code.value.trim()
		if (code.value) {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			//根据编码-仓库编码查询
			await apiOrder.getOrderCodeInfo({ code: code.value }).then(res => {
				if (res.code == 20000) {
					tmpCodeInfo.value = res.data.row
				}
			})
			uni.hideLoading()
		} else {
			uni.showToast({
				title: '请先输入条码',
				icon: 'none'
			})
		}
		// popup.value.close()

	}, 700)
	const confirmFn = () => {
		let itemGoods = goodsList.value
		if (exchange.value) {
			if (tmpCodeInfo.value.goodsId == goodsList.value.goodsId && tmpCodeInfo.value.goodsSpecId == goodsList.value.goodsSpecId) {
				uni.showModal({
					title: '提示',
					content: '更换的商品与原商品一致,请仔细核对！',
					confirmText: '确认',
					showCancel: false
				}).then(res => {
					//确认
					if (res.confirm) {
						return
					}
				})
				return
			}
			exchangeInfo.value = {
				code: tmpCodeInfo.value.code,
				goodsCode: tmpCodeInfo.value.goodsCode,
				goodsBrand: tmpCodeInfo.value.goodsBrand,
				goodsId: tmpCodeInfo.value.goodsId,
				goodsImage: tmpCodeInfo.value.goodsImage,
				goodsModel: tmpCodeInfo.value.goodsModel,
				goodsName: tmpCodeInfo.value.goodsName,
				goodsSpecId: tmpCodeInfo.value.goodsSpecId,
				goodsSpecName: tmpCodeInfo.value.goodsSpecName,
				goodsType: tmpCodeInfo.value.goodsType,
			}
			if (!goodsList.value.codes.includes(tmpCodeInfo.value.code)) {
				if (goodsList.value.codes.length == 0 || goodsList.value.codes.length == 1) {
					goodsList.value.codes = [tmpCodeInfo.value.code]
				} else {
					oldCodeList.value = _.cloneDeep(dataList.value).codes
					goodsList.value.codes = goodsList.value.codes.map((o, index) => {
						if (index == 0) {
							o = tmpCodeInfo.value.code
						}
						return o
					})
				}
			}
			popupCode.value.close()
		} else {
			if (exchangeInfo.value) {
				if (tmpCodeInfo.value.goodsId == exchangeInfo.value.goodsId && tmpCodeInfo.value.goodsSpecId == exchangeInfo.value.goodsSpecId) {
					if (goodsList.value.codes.includes(tmpCodeInfo.value.code)) {
						uni.showModal({
							title: '提示',
							content: '添加的条码与以上商品条码重复',
							confirmText: '确认',
							showCancel: false
						}).then(res => {
							//确认
							if (res.confirm) {
								return
							}
						})
						return
					} else {
						if (!exchangeIndex.value && !(exchangeIndex.value == 0)) {
							goodsList.value.codes.unshift(tmpCodeInfo.value.code)
						} else {
							goodsList.value.codes = goodsList.value.codes.map((o, index) => {
								if (index == exchangeIndex.value) {
									oldCodeList.value = oldCodeList.value.filter(i => !(i == o))
									o = tmpCodeInfo.value.code
								}
								return o
							})
						}


						popupCode.value.close()
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '该条码商品与以上条码商品不一致',
						confirmText: '确认',
						showCancel: false
					}).then(res => {
						//确认
						if (res.confirm) {

							return
						}
					})
				}
			} else {
				if (tmpCodeInfo.value.goodsId == goodsList.value.goodsId && tmpCodeInfo.value.goodsSpecId == goodsList.value.goodsSpecId) {
					if (goodsList.value.codes.includes(tmpCodeInfo.value.code)) {
						uni.showModal({
							title: '提示',
							content: '添加的条码与以上商品条码重复',
							confirmText: '确认',
							showCancel: false
						}).then(res => {
							//确认
							if (res.confirm) {
								return
							}
						})
						return
					} else {
						if (!exchangeIndex.value && !(exchangeIndex.value == 0)) {
							goodsList.value.codes.unshift(tmpCodeInfo.value.code)
						} else {
							goodsList.value.codes.splice(exchangeIndex.value, 1, tmpCodeInfo.value.code)
						}
						popupCode.value.close()
					}
				} else {
					alertDialog.value.open()
					// uni.showModal({
					// 	title: '提示',
					// 	content: '该条码商品与以上条码商品不一致，请确认此条码是同一个商品型号,/n或点击更换商品后在输入此条码',
					// 	confirmText: '确认',
					// 	showCancel: false
					// }).then(res => {
					// 	//确认
					// 	if (res.confirm) {

					// 		return
					// 	}
					// })
				}
			}
		}
	}
	// 预览图片
	const lookImg = (urls : any, index) => {
		uni.previewImage({
			urls: urls,
			current: index,
			indicator: 'number',
			// 先下载图片
			longPressActions: {
				itemList: ['保存图片'],
				success: function (data) {
					var url = urls[data.index]
					// 先下载图片
					uni.downloadFile({
						url,
						success: (res) => {
							// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({ title: "保存成功！", icon: 'none' });
								},
								fail: () => {
									uni.showToast({ title: "保存失败", icon: 'none' });
								},
							});
						},
					});
				}
			}
		})
	}
	// 复制
	const copy = (val : any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'success'
				})
			},
		})
	}
</script>

<style lang="scss" scoped>
	.popup_list {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.text_top_popup {
			text-align: center;
			font-size: 30rpx;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			border-bottom: 1px solid #eee;
		}



		.onlogout_bg {
			background-color: #fff;
			padding: 30rpx 40rpx 40rpx;
			box-sizing: border-box;
			width: 100%;

		}

		.onlogout {
			font-size: 28rpx;
			height: 80rpx;
			border-radius: 50rpx;
			line-height: 80rpx;
			width: 100%;
			color: #fff;
			background-color: #007cff;
		}

		:deep(.is-input-border) {
			// border-radius: 50rpx !important;
			// background-color: rgba(243, 244, 248, 1) !important;
			padding: 10rpx;
			// border: none;
			height: 80rpx !important;
			line-height: 80rpx;
			font-size: 28rpx;
			flex: 1;
		}

		.height_list {
			display: flex;
			margin-bottom: 20rpx;

			.left_img {
				width: 180rpx;
				height: 180rpx;
				border: 1px solid #eee;
				border-radius: 4rpx;
				margin: 0 20rpx 0 0;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
			}

			.right_text {
				font-size: 24rpx;
				// margin-right: 12rpx;
				flex: 1;
				position: relative;

				.brands {
					word-wrap: break-word;
					word-break: break-all;
					font-weight: bold;
					font-size: 28rpx;
					margin: 0 0 10rpx;
				}

				.ms {
					display: flex;
					// align-items: center;
					width: 100%;
					word-wrap: break-word;
					word-break: break-all;
					margin: 8rpx 0;

					.tip {
						color: #777;
					}

					.lis {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						flex: 1;
					}
				}
			}
		}

		.list_ovh_box {
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 100%;
			overflow: hidden;
			padding: 24rpx 30rpx 0;

			.scroll-view_list {
				height: 100%;

				.list_ovh {
					padding-bottom: 100rpx;
					box-sizing: border-box;

					.way_name {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						width: 100%;
						column-gap: 20rpx;

						.code_sn {
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							word-wrap: break-word;
							word-break: break-all;
							flex: 1;
						}

						.copy_del {
							display: flex;
							align-items: center;
							column-gap: 40rpx;

							.img {
								width: 30rpx;
								height: 30rpx;
							}
						}

					}
				}
			}

		}
	}

	.popup_add {
		width: 80vw;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 65vh;
		overflow: auto;

		.text_top_popup {
			text-align: center;
			font-size: 28rpx;
			padding: 0rpx 0 20rpx;
			width: 100%;
			position: relative;

			.icon {
				position: absolute;
				right: 0rpx;
				font-weight: 500;
			}
		}

		.search_box {
			display: flex;
			align-items: center;
			column-gap: 24rpx;
			width: 100%;
			margin: 24rpx 0 30rpx;

			.search_input {
				flex: 1;
			}

			.search_btn {
				color: #007cff;
				font-size: 28rpx;
			}
		}

		.onlogout {
			font-size: 28rpx;
			height: 80rpx;
			border-radius: 50rpx;
			line-height: 80rpx;
			width: 100%;
			color: #fff;
			background-color: #007cff;
		}

		.height_list {
			display: flex;
			margin-bottom: 10rpx;

			.left_img {
				width: 180rpx;
				height: 180rpx;
				border: 1px solid #eee;
				border-radius: 4rpx;
				margin: 0 20rpx 0 0;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
			}

			.right_text {
				font-size: 24rpx;
				// margin-right: 12rpx;
				flex: 1;
				position: relative;

				.brands {
					word-wrap: break-word;
					word-break: break-all;
					font-weight: bold;
					font-size: 28rpx;
					margin: 0 0 10rpx;
				}

				.ms {
					display: flex;
					// align-items: center;
					width: 100%;
					word-wrap: break-word;
					word-break: break-all;
					margin: 8rpx 0;

					.tip {
						color: #777;
					}

					.lis {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						flex: 1;
					}
				}
			}
		}
	}
</style>